<template>
	<view class="container">
		<swiper class="banner" :autoplay="true" :interval="3000" :duration="1000" :indicator-dots='false'>
			<swiper-item v-for="(item,index) in imgArr" :key="item" @tap="toSeeImg(index)">
				<image class="banner" :src="item" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="main">
			<view class="user">
				<image :src='studio.detail.avatar' mode=""></image>
				<view>{{studio.detail.name}}</view>
			</view>
			<view class="address">
				<view class="add">
					<view class="add_detail">
						<image class="add_img" :src="url+'icon-136.png'" mode=""></image>
						<view>{{studio.detail.province+studio.detail.city+studio.detail.area+studio.detail.address}}</view>
					</view>
					<image @tap="studio.address" class="dao" :src="url+'icon-91.png'"></image>
				</view>
				<view class="phone">
					<view class="phoneBo">
						<image :src="url+'icon-137.png'" mode=""></image>
						<text>{{studio.detail.phone}}</text>
					</view>
					<view class="toPhone" @tap="studio.handleContact">联系门店</view>
				</view>
			</view>
			<!-- <view class="listTip" v-if="studio.detail.areaPic" @tap="studio.authentication">
				<image v-for="item in studio.detail.areaPic" :key="item" :src="item" mode="heightFix"></image>
			</view> -->
			<view class="content">{{studio.detail.introduce}}</view>
			<view class="album" v-if="studio.detail.picJsons">
				<view class="album_title">门店相册</view>
				<view class="album_list">
					<view class="item" v-for="(item,index) in studio.detail.picJsons" :key="item.id" @tap="toSeeImg(index)">
						<image :src="item.picUrl" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<seeImage v-if="seeImgShow" :list='imgArr' :index='imgIndex' @close='close'></seeImage>
	</view>
</template>

<script lang="ts" setup>
import seeImage from '../components/seeImage/index.vue'
import api from '@/api'
import {ref,reactive} from 'vue'
import {onLoad} from '@dcloudio/uni-app'
import { accredit } from '@/hooks/useAppPermission/index';
const url = ref<string>('https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/')

onLoad(async (e)=>{
	studioId.value = e.studioId
	userId.value = e.userId?e.userId:''
	await studio.getDetails()
	await studio.getConfig()
})

const studioId = ref<number>(0)  //工作室id
const userId = ref<string>('')//陪宠师id

// 工作室详情
const studio = reactive<any>({
	detail:{},
	getDetails:async()=>{
		const res: any = await api({
			method: 'get',
			url: `/mall/studio/getStudioDetail/${studioId.value}`,
		})
		if (res) {
			studio.detail = res.data
			imgArr.value = []
			if(res.data.picJson!='[]'){
				studio.detail.picJsons = JSON.parse(res.data.picJson)
				studio.detail.picJsons.forEach(item=>{
					imgArr.value.push(item.picUrl)
				})
			}else{
				imgArr.value = ['https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/home-banner-default.png']
			}
		}
	},
	getConfig:async()=>{
		const res: any = await api({
			method: 'get',
			url: `/mall/content/home-page-config/list`,
		})
		let arr = res.data.filter(item=>item.type==4)
		studio.detail.areaPic = arr[0].areaPic.split(',')
	},
	// 联系客服
	handleContact: async () => {
		// #ifdef APP
		const status = await accredit('CALL_PHONE')
		if (status != 1) return
		// #endif
		uni.makePhoneCall({
			phoneNumber: studio.detail.phone
		})
	},
	//认证页面
	authentication:() =>{
		uni.navigateTo({
			url:'/pages/studio/certificationDetails/index'
		})
	},
	address:()=>{
		let arr = studio.detail.latitudeLongitude.split(',')
		uni.openLocation({
			longitude:Number(arr[0]),
			latitude:Number(arr[1]),
			address:studio.detail.province+studio.detail.city+studio.detail.area+studio.detail.address,
			fail:()=>{
				uni.showToast({
					title: '请先安装此地图软件',
					icon: 'success'
				});
			}
		})
	}
}) 


const seeImgShow = ref<Boolean>(false)//查看图片组件弹框
const imgIndex = ref<number>(0)
const imgArr = ref([])
const toSeeImg = (index:number)=>{
	imgIndex.value = index
	seeImgShow.value = !seeImage.value
}
const close = () =>{
	seeImgShow.value = false
}
</script>

<style lang="scss" scoped>
.container{
	width: 100%;
	height: 100%;
	line-height: 1;
	background: linear-gradient( 180deg, #FFFFFF 0%, #F9F6F6 100%);
}
.banner{
	position: fixed;
	left: 0;top: 0;
	width: 100vw;
	height: 500rpx;
}
.main{
	padding: 0 32rpx 44rpx;
	margin-top: 500rpx;
	box-sizing: border-box;
	position: relative;
	z-index: 222;
	background: linear-gradient( 180deg, #FFFFFF 0%, #F9F6F6 100%);
}
.user{
	@include flex(flex-end);
	image{
		width: 80px;
		height: 80px;
		border-radius: 24rpx;
		margin: -32rpx 16rpx 0 0;
	}
	view{
		color: #1A1A1A;
		font-size: 40rpx;
		font-weight: bold;
		padding-bottom: 44rpx;
	}
}
.address{
	width: 100%;
	padding: 32rpx 24rpx;
	background: #F9F6F6;
	border-radius: 24rpx;
	margin: 48rpx 0 64rpx;
	box-sizing: border-box;
	.add{
		margin-bottom: 36rpx;
		@include flex(flex-start,space-between);
		.add_img{
			width: 32rpx;
			height: 32rpx;
			margin-right: 16rpx;
		}
		.dao{
			width: 40rpx;
			height: 40rpx;
		}
		.add_detail{
			@include flex(flex-start);
		}
		view{
			width: calc(100% - 138rpx);
			font-size: 26rpx;
			color: #5C5E5E;
			line-height: 32rpx;
		}
	}
	.phone{
		font-size: 26rpx;
		color: #5C5E5E;
		@include flex(center,space-between);
		image{
			width: 32rpx;
			height: 32rpx;
			margin-right: 16rpx;
		}
		.phoneBo{
			@include flex(center);
		}
		.toPhone{
			color: #FF6084;
			text-decoration: underline;
		}
	}
}
.listTip{
	@include flex(center);
	margin:64rpx 0 24rpx;
	image{
		height: 38rpx;
		border-radius: 8rpx;
		margin-right: 8rpx;
	}
}
.content{
	font-size: 30rpx;
	color: #1B2120;
	line-height: 56rpx;
	margin-top: 24rpx;
}
.album{
	margin-top: 48rpx;
	padding: 40rpx 32rpx;
	background: #FFFFFF;
	border-radius: 24rpx;
	box-sizing: border-box;
	.album_title{
		color: #1B2120;
		font-size: 32rpx;
		font-weight: bold;
		padding-bottom: 24rpx;
		border-bottom: 2rpx solid #E8D8DD;
	}
}
.album_list{
	@include flex(center);
	flex-wrap: wrap;
	.item{
		width: 198rpx;
		color: #5C5E5E;
		font-size: 24rpx;
		margin: 40rpx 12rpx 0 0;
		.name{
			color: #1B2120;
			font-size: 26rpx;
			font-weight: bold;
			margin: 16rpx 0;
		}
		image{
			width: 198rpx;
			height: 198rpx;
			display: block;
			border-radius: 4rpx;
		}
		&:nth-child(3n){
			margin-right: 0;
		}
	}
}
</style>
